<script lang="ts" setup>
import {onLoad} from "@dcloudio/uni-app";
import {checkAppVersionApi} from "@/api/common";
import {ref} from "vue";
import type {Version} from "@/types/version";

onLoad(() => {
  // #ifdef APP-PLUS
  checkAppVersion()
  // #endif
})
const {safeAreaInsets} = uni.getSystemInfoSync()
const aboutList = [
  {
    title: '联系方式',
    value: 2,
    icon: 'cuIcon-mail'
  },
  {
    title: '服务协议',
    value: 3,
    icon: 'cuIcon-form'
  },
  {
    title: '帮助',
    value: 4,
    icon: 'cuIcon-question'
  }
]
// #ifdef APP-PLUS
const appList = [
  {
    title: '当前版本',
    value: 0,
    icon: 'cuIcon-apps',
    version: ''
  },
  {
    title: '版本更新',
    value: 1,
    icon: 'cuIcon-pullup',
    version: '已是最新版本'
  },
]
const isNewVersion = ref(true)
// #endif
//获取当前版本号
// #ifdef APP-PLUS
const v = ref<Version>()
const oldV = ref('')
const progress = ref() // 下载进度
const download = ref()
const checkAppVersion = () => {
  uni.getSystemInfo({
    success: async function (res) {
      oldV.value = res.appWgtVersion!
      appList[0].version = res.appWgtVersion!
      const resV = await checkAppVersionApi(res.appWgtVersion!)
      v.value = resV.data
      console.log(resV)
      if (v.value?.version !== res.appWgtVersion!) {
        appList[1].version = '发现新版本——v' + v.value?.version
        isNewVersion.value = false
      }
    }
  })
}
// #endif
const handleAbout = (value: number) => {
  switch (value) {
    case 0:
      break
    case 1:
      handleUpdateApp()
      break
    case 2:
      handleContact()
      break
    case 3: {
      uni.navigateTo({url: '/subPkg/agreement/agreement'})
    }
      break
    case 4:
      uni.navigateTo({url: '/subPkg/help/help'})
      break
  }
}
const goBack = () => {
  uni.navigateBack()
}
// #ifdef APP-PLUS
let downloadTask: any
const handleUpdateApp = () => {
  isNewVersion.value === true
      ? uni.showToast({
        title: '当前已是最新版本',
        icon: 'none'
      })
      : uni.showModal({
        title: '更新内容',
        confirmText: '立即更新',
        confirmColor: '#39c5bb',
        content: 'v' + oldV.value + '->' + 'v' + v.value?.version + '\n' + v.value?.desc,
        success: function (res) {
          if (res.cancel) {
            return
          }
          download.value.open()
          // 下载文件
          downloadTask = uni.downloadFile({
            url: v.value?.link!,
            success: function (res) {
              // 下载成功
              if (res.statusCode === 200) {
                // 安装
                plus.runtime.install(res.tempFilePath, {
                  force: true
                }, function () {
                }, function (e) {
                })
              }
            },
            complete: function (res) {
              download.value.close()
            }
          })
          downloadTask.onProgressUpdate((res: any) => {
            progress.value = res.progress
            // 满足测试条件，取消下载任务。
          })
        }
      })
}
const handleCloseDownload = () => {
  download.value.close()
  downloadTask.abort()
  uni.showToast({
    title: '已取消更新',
    icon: 'none'
  })
}
// #endif


/**
 * 点击联系
 */
const handleContact = () => {
  uni.showActionSheet({
    itemList: ['电话:19532971627', 'QQ: 3215624200', '邮箱: 3215624200@qq.com'],
    itemColor: '#39c5bb',
    success: function (res) {
      if (res.tapIndex === 0) {
        plus.device.dial('19532971627', true)
      } else if (res.tapIndex === 1) {
        // #ifdef APP-PLUS
        plus.runtime.launchApplication({
          pname: "com.tencent.mobileqq",
          action: "com.tencent.mobileqq.activity.SplashActivity",
        }, (e) => {
          console.log("e", e)
        })
        // #endif
        uni.setClipboardData({
          data: '3215624200',
          success: () => {
            uni.showToast({
              title: '复制成功'
            })
          }
        })
      } else if (res.tapIndex === 2) {
        uni.setClipboardData({
          data: '3215624200@qq.com',
          success: () => {
            uni.showToast({
              title: '已复制邮箱'
            })
          }
        })
      }
    }
  })
}
</script>

<template>
  <view :style="{paddingTop: safeAreaInsets?.top + 'px'}" class="padding-lr-lg box" style="height: 100vh">
    <view class="flex justify-center align-center flex-column"
          style="position: relative;width: 100%;height: 100%;gap: 40rpx">
      <text class="cuIcon-roundleftfill-copy line-awGreen" style="font-size: 56rpx;position:absolute;top: 30rpx;left: 0"
            @click="goBack"></text>
      <view class="flex justify-center align-center"
            style="border-radius: 50rpx;overflow: hidden;width: 280rpx;height: 280rpx">
        <image class="swing-in-right-fwd" mode="aspectFit" style="width: 180px;height: 180px"
               src="/static/app-cover.jpg"></image>
      </view>
      <view class="text-black text-xl margin-bottom-lg">萌创cute</view>
      <view class="about">
        <!-- #ifdef APP-PLUS -->
        <view v-for="(item,index) in appList" :key="index" class="about-item" @click="handleAbout(item.value)">
          <text :class="[item.icon]" style="font-size: 36rpx"></text>
          <view class="flex justify-between align-center  text-df"
                style="border-bottom: 1rpx solid #ccc;flex-grow: 1;padding: 20rpx;font-size: 16px">
            <text>{{ item.title }}</text>
            <text v-show="item.value==0">v {{ item.version }}</text>
            <text v-show="item.value==1" :style="{color: isNewVersion?'#999':'#39c6bb'}">{{ item.version }}</text>
          </view>
        </view>
        <!-- #endif -->
        <view v-for="(item,index) in aboutList" :key="index" class="about-item" @click="handleAbout(item.value)">
          <text :class="[item.icon]" style="font-size: 36rpx"></text>
          <view class="flex justify-between align-center  text-df"
                style="border-bottom: 1rpx solid #ccc;flex-grow: 1;padding: 20rpx;font-size: 16px">
            <text>{{ item.title }}</text>
            <text v-show="item.value==0">{{ item }}</text>
            <uni-icons v-show="item.value>=2" color="#ccc" type="right">
            </uni-icons>
          </view>
        </view>
        <view style="position: absolute;bottom: 20px;font-size: 12px;color: #999999">
          <view>&copy; 2024 萌创cute. All rights reserved.</view>
          <!-- #ifdef H5 -->
          <uni-link font-size="12" :text="'蜀ICP备2024072963号-1'" show-under-line="false" :href="'https://beian.miit.gov.cn/'"></uni-link>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </view>

  <uni-popup ref="download" :is-mask-click="false" type="center">
    <view
        class="flex justify-center align-center flex-column padding-sm"
        style="width: 85vw;min-height: 250rpx;background-color:#fff;border-radius: 20rpx ;gap: 40rpx;position: relative">
      <text class="cuIcon-roundclosefill text-awGreen" style="position: absolute;top: 0;right: 0;font-size: 56rpx"
            @click="handleCloseDownload"></text>
      <view class="text-black text-lg">正在更新，请耐心等待</view>
      <aw-progress :progress="progress"></aw-progress>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
/* #ifdef H5 */
body {
  background-color: #f1f1f1;
}

/* #endif */

.about {
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  &-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.swing-in-right-fwd {
  animation: swing-in-right-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

@keyframes swing-in-right-fwd {
  0% {
    transform: rotateY(-100deg);
    transform-origin: right;
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    transform-origin: right;
    opacity: 1;
  }
}


</style>
